<template>
	<view class="uni-searchbar">
		<view :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }" class="uni-searchbar__box"
			@click="searchClick">
			<view class="uni-searchbar__box-icon-search">
				<slot name="searchIcon">
					<uni-icons color="#c0c4cc" size="18" type="search" />
				</slot>
			</view>
			<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText"
				:maxlength="maxlength" class="uni-searchbar__box-search-input" confirm-type="search" type="text"
				v-model="searchVal" @confirm="confirm" @blur="blur" @focus="emitFocus" />
			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
			<view v-if="show && (clearButton === 'always' || clearButton === 'auto' && searchVal !== '') && !readonly"
				class="uni-searchbar__box-icon-clear" @click="clear">
				<slot name="clearIcon">
					<uni-icons color="#c0c4cc" size="20" type="clear" />
				</slot>
			</view>
		</view>
		<text @click="cancel" class="uni-searchbar__cancel"
			v-if="cancelButton === 'always' || show && cancelButton === 'auto'">{{ cancelTextI18n }}</text>
	</view>
</template>

<script>
import {
	initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
	t
} = initVueI18n(messages)

/**
 * SearchBar 搜索栏
 * @description 搜索栏组件，通常用于搜索商品、文章等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
 * @property {Number} radius 搜索栏圆角
 * @property {Number} maxlength 输入最大长度
 * @property {String} placeholder 搜索栏Placeholder
 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
 * 	@value always 一直显示
 * 	@value auto 输入框不为空时显示
 * 	@value none 一直不显示
 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
 * 	@value always 一直显示
 * 	@value auto 输入框不为空时显示
 * 	@value none 一直不显示
 * @property {String} cancelText 取消按钮的文字
 * @property {String} bgColor 输入框背景颜色
 * @property {Boolean} focus 是否自动聚焦
 * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 */

export default {
	name: "UniSearchBar",
	emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
	props: {
		placeholder: {
			type: String,
			default: ""
		},
		radius: {
			type: [Number, String],
			default: 5
		},
		clearButton: {
			type: String,
			default: "auto"
		},
		cancelButton: {
			type: String,
			default: "auto"
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		bgColor: {
			type: String,
			default: "#F8F8F8"
		},
		maxlength: {
			type: [Number, String],
			default: 100
		},
		value: {
			type: [Number, String],
			default: ""
		},
		modelValue: {
			type: [Number, String],
			default: ""
		},
		focus: {
			type: Boolean,
			default: false
		},
		readonly: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			show: true,
			showSync: true,
			searchVal: ''
		}
	},
	computed: {
		cancelTextI18n() {
			return this.cancelText || t("uni-search-bar.cancel")
		},
		placeholderText() {
			return this.placeholder || t("uni-search-bar.placeholder")
		}
	},
	watch: {
		// #ifndef VUE3
		value: {
			immediate: true,
			handler(newVal) {
				this.searchVal = newVal
				if (newVal) {
					this.show = true
				}
			}
		},
		// #endif
		// #ifdef VUE3
		modelValue: {
			immediate: true,
			handler(newVal) {
				this.searchVal = newVal
				if (newVal) {
					this.show = true
				}
			}
		},
		// #endif
		focus: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					if (this.readonly) return
					this.show = true;
					this.$nextTick(() => {
						this.showSync = true
					})
				}
			}
		},
		searchVal(newVal, oldVal) {
			this.$emit("input", newVal)
			// #ifdef VUE3
			this.$emit("update:modelValue", newVal)
			// #endif
		}
	},
	methods: {
		searchClick() {
			if (this.readonly) return
			if (this.show) {
				return
			}
			this.show = true;
			this.$nextTick(() => {
				this.showSync = true
			})
		},
		clear() {
			this.$emit("clear", {
				value: this.searchVal
			})
			this.searchVal = ""
		},
		cancel() {
			if (this.readonly) return
			this.$emit("cancel", {
				value: this.searchVal
			});
			this.searchVal = ""
			this.show = false
			this.showSync = false
			// #ifndef APP-PLUS
			uni.hideKeyboard()
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord()
			// #endif
		},
		confirm() {
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord()
			// #endif
			this.$emit("confirm", {
				value: this.searchVal
			})
		},
		blur() {
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord()
			// #endif
			this.$emit("blur", {
				value: this.searchVal
			})
		},
		emitFocus(e) {
			this.$emit("focus", e.detail)
		}
	}
};
</script>

<style lang="scss">
$uni-searchbar-height: 36px;

.uni-searchbar {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	position: relative;
	padding: 10px;
	background-color: #c00000;
}

.uni-searchbar__box {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	overflow: hidden;
	position: relative;
	flex: 1;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	height: $uni-searchbar-height;
	padding: 5px 8px 5px 0px;
}

.uni-searchbar__box-icon-search {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 32px;
	padding: 0 8px;
	justify-content: center;
	align-items: center;
	color: #B3B3B3;
}

.uni-searchbar__box-search-input {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.uni-searchbar__box-icon-clear {
	align-items: center;
	line-height: 24px;
	padding-left: 8px;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-searchbar__text-placeholder {
	font-size: 14px;
	color: #B3B3B3;
	margin-left: 5px;
}

.uni-searchbar__cancel {
	padding-left: 10px;
	line-height: $uni-searchbar-height;
	font-size: 14px;
	color: #333333;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}
</style>
